<template>
	<view class="Myessay">

		<view class="total-text" v-for="(list,index) in textlist " :key="list.id">
			<!-- 左方图片区域 -->
			<view class="left-img">
				<image :src="list.backgrund" mode="aspectFill"></image>
			</view>
			<!-- 右方文字区域 -->
			<view class="right-textra">
				<!-- 标题 -->
				<text class="first-t" @click="GoSearchpag(list)">{{list.title}}</text>
				<!-- 文章 -->
				<view>
					<text>
						{{list.summary.slice(0,30)+'...' }}
					</text>

					<!-- 测试标题 -->
					<view class="text-title" v-if="IsShow">
						<text @click="golead">立即测试</text>
					</view>
					<!-- 点赞数量与阅读数量 -->
					<view class="paise" v-if="!IsShow">
						<view class="first-child">
							<view>
								<uni-icons type="hand-up" size="30" @click="GoParise(list.id,index)">
								</uni-icons>
							</view>
							<view>
								<text style=" font-size: 40rpx;">
									<template>
										{{ list.praiseCounts  }}
									</template>

								</text>
							</view>

						</view>
						<!--  -->
						<view class="first-child">
							<view>
								<uni-icons type="eye" size="30"></uni-icons>
							</view>
							<view>
								<text style="font-size: 40rpx;">{{list.viewCounts}}</text>
							</view>

						</view>

					</view>

				</view>
			</view>
			<!--  -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyEssay",
		data() {
			return {
				IsShow: this.$props.isShow,
				status: 0,
				parseShow: false,
				arcInfo: {
					category_id: '0',
					current: 1,
					orderByTime: '',
					size: 10,
					title: ''
				},
				testflag: []
			};
		},
		props: ['textlist', 'isShow', 'carId', 'order'],
		mounted() {
			// this.TextList = this.textlist
			// console.log('111', this.textlist.length)
			this.testflag = new Array(100).fill('false');
			// console.log(this.testflag)
		},
		methods: {
			//跳转搜索页与图书详情页
			GoSearchpag(list) {
				// let pages = getCurrentPages();
				// // console.log('当前页面的路由：', pages[pages.length - 1].$page.fullPath)
				// if (pages[pages.length - 1].$page.fullPath == '/pages/index/index') {
				// 	uni.navigateTo({
				// 		url: '/pages/search/search'
				// 	})
				// } else if (pages[pages.length - 1].$page.fullPath == '/pages/search/search') {
				const {

					id
				} = list
				// console.log(list)
				uni.navigateTo({
					url: `/pages/BookDetail/BookDetail?id=${id}`
				})
				// }

			},
			golead() {
				uni.navigateTo({
					url: '/pages/TestLead/TestLead'
				})
			},
			//点赞
			GoParise(id, index) {
				const Articleid = id
				const status = this.status
				// console.log('当前点赞', this.testflag[index])
				if (this.testflag[index] === false) {
					let res = this.$store.dispatch('GoPraise', {
						Articleid,
						status: 0
					})
					res.then(() => {
						this.testflag[index] = true;
						// console.log(this.testflag)
						uni.$emit('UpdatePrise');
						uni.showToast({
							title: "点赞成功",
						})
					})
				} else {
					let res = this.$store.dispatch('GoPraise', {
						Articleid,
						status: 1
					})
					res.then(() => {
						this.testflag[index] = false;
						uni.$emit('UpdatePrise');
						uni.showToast({
							title: "取消点赞",
						})
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.Myessay {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;

		.total-text {
			width: 750rpx;
			// min-height: 400rpx;
			height: auto;
			display: flex;
			padding-bottom: 40rpx;
			border-bottom: 1px solid #ccc;
			margin-bottom: 30rpx;

			.left-img {
				width: 280rpx;
				height: 250rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 25rpx;
				}
			}

			.right-textra {
				width: 340rpx;
				height: auto;
				position: relative;

				.first-t {
					font-weight: 600;
					font-size: 35rpx;
				}

				view {
					margin-top: 20rpx;
					width: 400rpx;
					line-height: 50rpx;
					font-size: 30rpx;


					.text-title {
						width: 150rpx;
						height: 50rpx;
						border-radius: 10px;
						line-height: 50rpx;
						text-align: center;
						// position: absolute;
						margin-left: 210rpx;
						color: #f3f3f3;
						font-size: 28rpx;
						margin-top: 15rpx;
						background-color: #dc5a5a;
					}

					// 
					.paise {
						width: 300rpx;
						height: 100rpx;
						margin-left: 100rpx;
						// background-color: #dc5a5a;
						display: flex;

						.first-child {
							width: 140rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							// background-color: #dc5a5a;
						}
					}
				}


			}

			// 

		}
	}
</style>
